/**
* 功能描述: 全局提示demo
* @author 崔孝楠
* @date 2022/10/6 19:12
* @version 1.0
*/
<template>
  <div class="yw-message">
    <!-- info message -->
    <div class="yw-message-notice">
      <div class="yw-message-content yw-message-info">
        <svg class="yw-message-icon" focusable="false" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path>
        </svg>
        <span>This is a normal message</span>
      </div>
    </div>
    <!-- success message -->
    <div class="yw-message-notice">
      <div class="yw-message-content yw-message-success">
        <svg focusable="false" class="yw-message-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
        </svg>
        <span>This is a success message</span>
      </div>
    </div>
    <!-- warning message -->
    <div class="yw-message-notice">
      <div class="yw-message-content yw-message-warning">
        <svg class="yw-message-icon" focusable="false" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path>
        </svg>
        <span>This is a warning message</span>
      </div>
    </div>
    <!-- error message -->
    <div class="yw-message-notice">
      <div class="yw-message-content yw-message-error">
        <svg focusable="false" class="yw-message-icon" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
        </svg>
        <span>This is a error message</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>
